<template>
  <view>
    <view style="height: 30px;border-bottom: 2px solid #007aff;margin-bottom:4px;">
      <text style="display: inline-block;margin-right:8px;color:#007aff; ">基本信息</text>
      <text style="display: inline-block;margin-right:8px; ">审批信息</text>
      <text style="display: inline-block;margin-right:8px; ">附件信息</text>
    </view>
    <view>
      <swiper  :indicator-dots="false" :autoplay="false" style="overflow:hidden;" :circular="true">

        <swiper-item>
          <view class="swiper-item uni-bg-red">
            <h3>共30条，未显全</h3>
            <view v-for="i in 30" :key="i">基本字段{{i}}：值{{i}}</view>
          </view>
        </swiper-item>

        <swiper-item>
          <view class="swiper-item uni-bg-green">
            <h3>共30条，未显全</h3>
            <view v-for="i in 30" :key="i">审批字段{{i}}：值{{i}}</view>
          </view>
        </swiper-item>

        <swiper-item>
          <view class="swiper-item uni-bg-blue">
            <h3>共30条，未显全</h3>
            <view v-for="i in 30" :key="i">附件字段{{i}}：值{{i}}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view style="height: 40px;">
      <button>保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: ['color1', 'color2', 'color3']
    }
  },
  methods: {

  }
}
</script>

<style scoped>
*{margin:0;padding:0;}
.uni-bg-red{
  background: #d64b4b;
}
.uni-bg-green{
  background: #1AAD19;
}
.uni-bg-blue{
  background: #007aff;
}
</style>
